<template>
  <div class="part-one card">
    <p class="card-name font-16 flex flex-align-items-center">数据总览</p>
    <div class="part-main flex-between">
      <div class="flex-between flex-column">
        <div class="item">
          <p class="item-name font-14">合作红人数</p>
          <p class="item-value font-20-B">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          <img src="@/assets/icon-14.png">
        </div>
        <div class="item">
          <p class="item-name font-14">推广产品数</p>
          <p class="item-value font-20-B">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          <img src="@/assets/icon-15.png">
        </div>
      </div>
      <div class="flex-between flex-column">
        <div class="item">
          <p class="item-name font-14">上线视频数</p>
          <p class="item-value font-20-B">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          <img src="@/assets/icon-16.png">
        </div>
        <div class="data flex-between flex-align-items-center">
          <div class="data-item">
            <p class="data-item-name font-12">总观看量</p>
            <p class="data-item-value font-14">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          </div>
          <div class="data-item">
            <p class="data-item-name font-12">总点赞量</p>
            <p class="data-item-value font-14">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          </div>
          <div class="data-item">
            <p class="data-item-name font-12">总评论数</p>
            <p class="data-item-value font-14">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          </div>
        </div>
      </div>
      <div class="flex-between flex-column">
        <div class="item">
          <p class="item-name font-14">总合作金额</p>
          <p class="item-value font-20-B">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          <img src="@/assets/icon-17.png">
        </div>
        <div class="data flex-between flex-align-items-center">
          <div class="data-item">
            <el-tooltip content="每千次展示成本=合作金额/视频观看量*1000（仅计算YouTube和Tik Tok平台）" placement="top" effect="light">
              <p class="data-item-name font-12 flex flex-align-items-center">CPM
                <i class="iconfont icon-chakantiezigengduojubao"></i>
              </p>
            </el-tooltip>
            <p class="data-item-value font-14">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          </div>
          <div class="data-item">
            <el-tooltip content="单次点击成本=合作金额/追踪链接点击量（仅计算带追踪链接的视频）" placement="top" effect="light">
              <p class="data-item-name font-12 flex flex-align-items-center">CPC
                <i class="iconfont icon-chakantiezigengduojubao"></i>
              </p>
            </el-tooltip>
            <p class="data-item-value font-14">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          </div>
          <div></div>
        </div>
      </div>
      <div class="flex-between flex-column">
        <div class="item">
          <p class="item-name font-14">上线链接数</p>
          <p class="item-value font-20-B">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          <img src="@/assets/icon-18.png">
        </div>
        <div class="data flex-between flex-align-items-center">
          <div class="data-item">
            <p class="data-item-name font-12">追踪链接点击量</p>
            <p class="data-item-value font-14">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          </div>
          <div class="data-item">
            <el-tooltip content="点击率=追踪链接点击量/视频观看量（仅计算YouTube和Tik Tok平台中，带追踪链接的视频）" placement="top" effect="light">
              <p class="data-item-name font-12 flex flex-align-items-center">CTR
                <i class="iconfont icon-chakantiezigengduojubao"></i>
              </p>
            </el-tooltip>
            <p class="data-item-value font-14">{{ partOneInfo.count > 0 ? partOneInfo.count : '-' }}</p>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  <div class="part-two card">
    <p class="card-name font-16 flex flex-align-items-center">总数据变化趋势图</p>
    <div class="part-main">
      <div class="toggle flex">
        <div class="view-toggle flex flex-align-items-center">
          <i class="iconfont icon-tubiao pointer" :class="{ active: partTwoForm.type === 'echart' }"
            @click="partTwoTypeChange('echart')"></i>
          <span></span>
          <i class="iconfont icon-caidan1 pointer" :class="{ active: partTwoForm.type === 'table' }"
            @click="partTwoTypeChange('table')"></i>
        </div>
      </div>
      <div v-show="partTwoForm.type === 'echart'" class="card-toggle flex-between flex-align-items-center">
        <div v-for="(item, index) in partTwoMenu" :key="index" class="card-item pointer"
          :class="{ active: partTwoForm.field === item.name }" @click="partTwoMenuChange(item.name)">
          <div class="card-item_title flex flex-align-items-center">
            <img :src="item.icon">
            <span class="font-14">{{ item.name }}</span>
          </div>
          <p class="card-item_num font-20-B">{{ item.value }}</p>
        </div>
      </div>
      <div v-show="partTwoForm.type === 'echart'" id="analysis-chart"></div>
      <template v-if="partTwoForm.type === 'table'">
        <el-table :data="partTwoList" height="420" class="table">
          <el-table-column prop="time" label="日期" />
          <el-table-column prop="value" label="观看量" />
          <el-table-column prop="value" label="点赞量" />
          <el-table-column prop="value" label="评论数" />
          <el-table-column prop="value" label="链接点击数" />
        </el-table>
        <div v-if="partTwoForm.total > 0" class="pagination flex">
          <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
            :total="partTwoForm.total" />
        </div>
      </template>
    </div>
  </div>
  <div class="part-three card">
    <p class="card-name font-16 flex flex-align-items-center">合作红人数据</p>
    <div class="part-main">
      <div class="operate-top flex-between flex-align-items-center">
        <div class="flex flex-align-items-center">
          <div class="search-platform flex">
            <p v-for="(item, index) in platformList" :key="index" class="flex-center flex-align-items-center pointer"
              :class="{ active: partThreeForm.platform === item.name }" @click="platformChange(item.name, 3)">
              <img :src="item.icon">
            </p>
          </div>
          <div class="search-input">
            <el-input v-model="partThreeForm.keyword" type="text" placeholder="搜索" maxlength="20" />
            <p class="pointer flex-center flex-align-items-center">
              <i class="iconfont icon-sousuo"></i>
            </p>
          </div>
        </div>
        <div class="cooperate-toggle flex flex-align-items-center">
          <i class="iconfont icon-yonghu pointer" :class="{ active: partThreeForm.type === 'sensation' }"
            @click="partTypeChange('sensation', 3)"></i>
          <span></span>
          <i class="iconfont icon-bofang1 pointer" :class="{ active: partThreeForm.type === 'video' }"
            @click="partTypeChange('video', 3)"></i>
        </div>
      </div>
      <el-table v-if="partThreeForm.type === 'sensation'" :data="partThreeList" height="420" style="width: 100%;"
        class="table">
        <el-table-column prop="time" label="最新发布时间" width="140" />
        <el-table-column prop="value" label="所属平台" width="100" />
        <el-table-column prop="value" label="红人频道链接" width="170" />
        <el-table-column prop="value" label="红人标签" width="220">
          <template #default="scope">
            <div v-if="scope.row.tags" class="row-tags flex">
              <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}</p>
              <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                <template #reference>
                  <div class="row-tag flex-center flex-align-items-center">
                    <i class="iconfont icon-gengduo"></i>
                  </div>
                </template>
                <div class="item-all-tags flex flex-wrap">
                  <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag }}
                  </p>
                </div>
              </el-popover>
            </div>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="国家" width="100" />
        <el-table-column prop="value" label="粉丝数" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="推广产品数" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="上线链接数" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="上线视频数" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="总观看量" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="总点赞量" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="总评论量" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="平均互动率" width="120" />
        <el-table-column prop="value" label="链接点击数" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="合作金额" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="CPM" />
        <el-table-column prop="value" label="CPC" />
      </el-table>
      <el-table v-if="partThreeForm.type === 'video'" :data="partThreeList" height="420" style="width: 100%;"
        class="table">
        <el-table-column fixed="left" prop="time" label="视频" width="320">
          <template #default="scope">
            <div class="row-video flex flex-align-items-center">
              <div class="flex pointer">
                <img :src="scope.row.img">
                <p class="flex-center flex-align-items-center">
                  <i class="iconfont icon-bofang"></i>
                </p>
              </div>
              <p class="font-14 ellipsis-2">{{ scope.row.time }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="发布红人" width="240">
          <template #default="scope">
            <div class="row-name flex flex-align-items-center">
              <img :src="scope.row.img">
              <p class="font-16-B ellipsis-1">{{ scope.row.time }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="视频发布时间" width="140" />
        <el-table-column prop="value" label="所属平台" width="100" />
        <el-table-column prop="value" label="红人频道链接" width="150" />
        <el-table-column prop="value" label="红人标签" width="220" />
        <el-table-column prop="value" label="国家" width="100" />
        <el-table-column prop="value" label="粉丝数" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="推广产品" width="120" />
        <el-table-column prop="value" label="追踪链接" width="140" />
        <el-table-column prop="value" label="视频地址" width="140" />
        <el-table-column prop="value" label="观看量" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="点赞量" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="评论量" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="互动率" width="120" />
        <el-table-column prop="value" label="推广产品ID" width="120" />
        <el-table-column prop="value" label="链接点击数" width="120">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.value, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="CTR" width="100" />
      </el-table>
      <div v-if="partThreeForm.total > 0" class="pagination flex">
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
          :total="partThreeForm.total" />
      </div>
    </div>
  </div>
  <div class="part-four card">
    <p class="card-name font-16 flex flex-align-items-center">产品数据</p>
    <div class="part-main">
      <no-data v-if="partFourList.length === 0" style="padding: 40px 0 70px;"></no-data>
    </div>
  </div>
  <div class="part-five card">
    <p class="card-name font-16 flex flex-align-items-center">数据榜单</p>
    <div class="part-main">
      <div class="operate-top flex-between flex-align-items-center">
        <div class="flex flex-align-items-center">
          <div class="search-platform flex">
            <p v-for="(item, index) in platformList" :key="index" class="flex-center flex-align-items-center pointer"
              :class="{ active: partFiveForm.platform === item.name }" @click="platformChange(item.name, 5)">
              <img :src="item.icon">
            </p>
          </div>
          <el-select v-model="partFiveForm.field" placeholder="请选择" size="large">
            <el-option v-for="(item, index) in partFiveSelect" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </div>
        <div class="cooperate-toggle flex flex-align-items-center">
          <i class="iconfont icon-yonghu pointer" :class="{ active: partFiveForm.type === 'sensation' }"
            @click="partTypeChange('sensation', 5)"></i>
          <span></span>
          <i class="iconfont icon-bofang1 pointer" :class="{ active: partFiveForm.type === 'video' }"
            @click="partTypeChange('video', 5)"></i>
        </div>
      </div>
      <el-table v-if="partFiveForm.type === 'sensation'" :data="partFiveList" height="420" class="table">
        <el-table-column prop="time" label="曝光量" />
        <el-table-column prop="value" label="互动率" />
        <el-table-column prop="value" label="链接点击数" />
        <el-table-column prop="value" label="CPM" />
        <el-table-column prop="value" label="CPC" />
      </el-table>
      <el-table v-if="partFiveForm.type === 'video'" :data="partFiveList" height="420" class="table">
        <el-table-column prop="time" label="曝光量" />
        <el-table-column prop="value" label="互动率" />
        <el-table-column prop="value" label="短链点击量" />
        <el-table-column prop="value" label="CTR" />
      </el-table>
      <div v-if="partFiveForm.total > 0" class="pagination flex">
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
          :total="partFiveForm.total" />
      </div>
    </div>
  </div>
</template>

<script setup>
import NoData from '@/components/noData.vue';
import { ref, watch, defineProps } from 'vue';
import * as echarts from "echarts";
import numConvert from '@/js/numConvert';

const props = defineProps(['tabCheck']);

const platformList = [
  {
    name: "YouTube",
    icon: require('../../../../../assets/icon-1.png')
  },
  {
    name: "TikTok",
    icon: require('../../../../../assets/icon-2.png')
  },
  {
    name: "Instagram",
    icon: require('../../../../../assets/icon-3.png')
  }
];
const partFiveSelect = [
  {
    name: '曝光量',
    value: '曝光量'
  },
  {
    name: '互动率',
    value: '互动率'
  },
  {
    name: '链接点击率',
    value: '链接点击率'
  },
  {
    name: 'CPM',
    value: 'CPM'
  },
  {
    name: 'CPC',
    value: 'CPC'
  }
];

const partOneInfo = ref({
  count: 0
});
const partTwoForm = ref({
  type: 'echart',
  field: '观看量',
  total: 100
});
const partTwoMenu = ref([
  {
    name: '观看量',
    icon: require('../../../../../assets/icon-19.png'),
    value: 1
  },
  {
    name: '点赞量',
    icon: require('../../../../../assets/icon-20.png'),
    value: 1
  },
  {
    name: '评论数',
    icon: require('../../../../../assets/icon-21.png'),
    value: 1
  },
  {
    name: '链接点击数',
    icon: require('../../../../../assets/icon-22.png'),
    value: 1
  }
]);
const partTwoList = ref([
  {
    time: '2023-07-01',
    value: 1000000
  },
  {
    time: '2023-08-01',
    value: 1200000
  },
  {
    time: '2023-09-01',
    value: 1300000
  },
  {
    time: '2023-10-01',
    value: 1400000
  },
  {
    time: '2023-11-01',
    value: 1500000
  }
]);
const partThreeForm = ref({
  type: 'sensation',
  platform: 'YouTube',
  keyword: '',
  total: 100
});
const partThreeList = ref([
  {
    time: '2023-07-01',
    value: 1000000,
    tags: ['时尚生活', '科技', '数码电器', '时尚服饰'],
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg'
  }
]);
const partFourList = ref([]);
const partFiveForm = ref({
  type: 'sensation',
  platform: 'YouTube',
  keyword: '',
  field: '曝光量',
  total: 100
});
const partFiveList = ref([
  {
    time: '2023-07-01',
    value: 1000000
  },
  {
    time: '2023-08-01',
    value: 1200000
  },
  {
    time: '2023-09-01',
    value: 1300000
  },
  {
    time: '2023-10-01',
    value: 1400000
  },
  {
    time: '2023-11-01',
    value: 1500000
  }
]);

const partTwoTypeChange = e => {
  if (partTwoForm.value.type !== e) {
    partTwoForm.value.type = e;
    partTwoForm.value.field = '观看量';
    analysisEchart();
  }
};
const partTwoMenuChange = e => {
  if (partTwoForm.value.field !== e) {
    partTwoForm.value.field = e;
    analysisEchart();
  }
};
// 内容趋势echart
const analysisEchart = () => {
  const myEChart = echarts.init(document.getElementById("analysis-chart"));
  let field = '', xAxisData = [], seriesData = [], seriesName = "";
  if (partTwoForm.value.field === '观看量') {
    field = 'value';
    seriesName = '观看量';
  } else if (partTwoForm.value.field === '点赞量') {
    field = 'value';
    seriesName = '点赞量';
  } else if (partTwoForm.value.field === '评论数') {
    field = 'value';
    seriesName = '评论数';
  } else if (partTwoForm.value.field === '链接点击数') {
    field = 'value';
    seriesName = '链接点击数';
  }
  partTwoList.value.forEach(item => {
    xAxisData.push(item.time);
    seriesData.push(item[field]);
  });
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/>{a} : {c}'
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      }
    },
    series: [
      {
        name: seriesName,
        data: seriesData,
        type: 'line',
        smooth: true
      }
    ]
  };
  myEChart.setOption(option);
}
const platformChange = (e, type) => {
  if (type === 3 && partThreeForm.value.platform !== e) {
    partThreeForm.value.platform = e;
  }
  if (type === 5 && partFiveForm.value.platform !== e) {
    partFiveForm.value.platform = e;
  }
}
const partTypeChange = (e, type) => {
  if (type === 3 && partThreeForm.value.type !== e) {
    partThreeForm.value.type = e;
  }
  if (type === 5 && partFiveForm.value.type !== e) {
    partFiveForm.value.type = e;
  }
}

watch(props, e => {
  if (e.tabCheck === '效果监控') {
    setTimeout(analysisEchart)
  }
});
</script>

<style lang="less" scoped>
.card {
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  margin-top: 16px;

  &:first-child {
    margin-top: 0;
  }

  .card-name {
    color: #333;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      background: #f85277;
      border-radius: 50%;
      margin-right: 8px;
    }
  }

  .part-main {
    margin-top: 24px;
  }
}

.pagination {
  margin-top: 16px;
}

.part-one {
  .part-main {
    &>div {
      flex: 3;
      height: 190px;
      margin-left: 12px;
      border-radius: 20px;
      padding: 16px 24px;
      position: relative;

      &:nth-child(1) {
        flex: 2;
        margin-left: 0;
        padding: 0;

        .item {
          position: relative;
          padding: 16px 24px;
          height: 90px;
          border-radius: 20px;
          overflow: hidden;
          border-radius: 20px;

          &:nth-child(1) {
            background: linear-gradient(135deg, hsla(21, 96%, 72%, .1), rgba(246, 98, 144, .1));

            .item-value {
              color: #f85277;
            }
          }

          &:nth-child(2) {
            background: linear-gradient(144deg, rgba(173, 228, 222, .1), rgba(89, 118, 246, .1));

            .item-value {
              color: #3fa0ff;
            }
          }
        }
      }

      &:nth-child(2) {
        background: linear-gradient(135deg, rgba(81, 170, 254, .1), rgba(119, 78, 240, .1));

        .item {
          .item-value {
            color: #4c64ff;
          }
        }
      }

      &:nth-child(3) {
        background: linear-gradient(135deg, rgba(250, 217, 97, .1), rgba(255, 155, 4, .1));

        .item {
          .item-value {
            color: #ffac04;
          }
        }
      }

      &:nth-child(4) {
        background: linear-gradient(315deg, rgba(95, 215, 203, .1), rgba(136, 240, 182, .1));

        .item {
          .item-value {
            color: #6cdbc9;
          }
        }
      }
    }

    .item {
      width: 100%;
      position: relative;

      .item-name {
        color: #666;
        margin-bottom: 12px;
      }

      img {
        position: absolute;
        top: 20px;
        right: 0;
        width: 100px;
        height: 100px;
      }
    }

    .data {
      position: absolute;
      bottom: 8px;
      left: 8px;
      width: calc(100% - 16px);
      height: 100px;
      background: linear-gradient(180deg, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .3));
      border-radius: 14px 14px 20px 20px;
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      z-index: 2;
      padding: 0 16px;

      .data-item {
        .data-item-name {
          color: #666;
          margin-bottom: 6px;

          i {
            color: #a9a9a9;
            margin-left: 4px;
          }
        }

        .data-item-value {
          color: #333;
        }
      }
    }
  }
}

.part-two {
  .toggle {
    justify-content: end;
    padding: 0 16px;
    margin-bottom: 24px;

    .view-toggle {
      width: 100px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid #f2f2f2;

      i {
        flex: 1;
        font-size: 20px;
        color: #999;
        height: 44px;
        line-height: 44px;
        text-align: center;

        &.active {
          color: @main-color;
        }
      }

      span {
        width: 1px;
        height: 24px;
        background: #ededed;
        border-radius: 1px;
      }
    }
  }

  .card-toggle {
    padding: 0 16px;

    .card-item {
      flex: 1;
      height: 90px;
      border-radius: 14px;
      padding: 16px 24px;
      border: 1px solid #f2f2f2;
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }

      &:nth-child(1) {
        &.active {
          background: rgba(253, 189, 54, .1) !important;
          border: 1px solid #fdbd36;
        }

        &:hover {
          background: rgba(253, 189, 54, .1) !important;
        }
      }

      &:nth-child(2) {
        &.active {
          background: rgba(85, 92, 253, .06) !important;
          border: 1px solid #555cfd;
        }

        &:hover {
          background: rgba(85, 92, 253, .06) !important;
        }
      }

      &:nth-child(3) {
        &.active {
          background: rgba(255, 82, 119, .06) !important;
          border: 1px solid #ff5277;
        }

        &:hover {
          background: rgba(255, 82, 119, .06) !important;
        }
      }

      &:nth-child(4) {
        &.active {
          background: rgba(115, 222, 179, .06) !important;
          border: 1px solid #73deb3;
        }

        &:hover {
          background: rgba(115, 222, 179, .06) !important;
        }
      }

      .card-item_title {
        img {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }

        span {
          color: #666;
        }
      }

      .card-item_num {
        margin-top: 6px;
        color: #333;
        line-height: 26px;
        padding-left: 32px;
      }
    }
  }

  #analysis-chart {
    height: 340px;
  }
}

.part-three {
  .row-video {
    div {
      position: relative;
      width: 65px;
      height: 50px;
      margin-right: 16px;

      img {
        width: 83px;
        height: 50px;
        border-radius: 8px;
        object-fit: cover;
      }

      p {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 20px;
        top: 10px;
        border-radius: 15px;
        background: rgba(0, 0, 0, 0.4);

        i {
          color: #fff;
        }
      }
    }

    &>p {
      color: #323233;
    }
  }

  .row-name {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 16px;
    }
  }

  .row-tags {
    .row-tag {
      height: 24px;
      padding: 0 8px;
      background: hsla(0, 0%, 93%, .4);
      border-radius: 12px;
      border: 1px solid #dcdee0;
      color: #666;
      line-height: 24px;
      margin-right: 8px;
    }
  }
}

.operate-top {
  margin-bottom: 16px;

  .search-platform {
    margin-right: 16px;
    width: 158px;
    height: 44px;
    background: #f8f8f8;
    border-radius: 10px;

    p {
      width: 54px;
      height: 44px;

      &.active {
        background: rgba(255, 82, 119, .1);
        border-radius: 10px;
        border: 1px solid #ff5277;
      }

      img {
        width: 24px;
        height: 24px;
      }
    }
  }

  .search-input {
    position: relative;

    &::v-deep .el-input {
      width: 320px;
      height: 44px;
    }

    p {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 44px;
      height: 100%;

      i {
        color: @main-color;
      }
    }
  }

  .cooperate-toggle {
    width: 100px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;

    i {
      flex: 1;
      font-size: 18px;
      color: #999;
      height: 44px;
      text-align: center;
      line-height: 44px;

      &.active {
        color: @main-color;
      }
    }

    span {
      width: 1px;
      height: 24px;
      background: #ededed;
      border-radius: 1px;
    }
  }
}

.item-all-tags {
  width: auto;
  padding: 10px;

  .item-all-tag {
    margin: 0 8px 10px 0;
    line-height: 24px;
    background: hsla(0, 0%, 93%, .4);
    border-radius: 12px;
    border: 1px solid #dcdee0;
    font-size: 12px;
    padding: 0 8px;
    color: #606266;
    white-space: nowrap;
  }
}
</style>
